<template>
	<xn-form-container :title="'日志详细'" :width="900" v-model:open="open" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :rules="formRules">
			<a-form-item label="结果的最大值：" name="resultMax">
				{{ formData.simulate.resultMax }}
			</a-form-item>
			<a-form-item label="结果的最小值：" name="resultMin">
				{{ formData.simulate.resultMin }}
			</a-form-item>

			<a-form-item label="参数：" name="params">
				<a-table ref="tableRef" :columns="columns" :data-source="formData.simulate.params" bordered :pagination="false">
					<template #bodyCell="{ column, record, index }">
						<template v-if="column.dataIndex === 'type'">
							<span v-if="record.type === '1'">变量</span>
							<span v-else>常量</span>
						</template>
						<template v-if="column.dataIndex === 'distributionType'">
							<span v-if="record.distributionType === '1'">正态分布</span>
							<span v-else>无</span>
						</template>
					</template>
				</a-table>
			</a-form-item>

			<a-form-item label="计算公式：" name="formula">
				{{ formData.simulate.formula }}
			</a-form-item>

			<a-form-item label="模拟次数：" name="simulateNum">
				{{ formData.simulate.simulateNum }}
			</a-form-item>

			<a-form-item-rest>
				<div ref="basicLineChartRef" style="width: 100%; height: 500px"></div>
			</a-form-item-rest>
		</a-form>

		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="logView">
	import monteCalculateLogApi from '@/api/monte/monteCalculateLogApi.js'
	import * as echarts from 'echarts'

	// 抽屉状态
	const open = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const chartOption = ref({})

	const basicLineChartRef = ref()

	const columns = [
		{
			title: 'key',
			dataIndex: 'paramKey'
		},
		{
			title: '类型',
			dataIndex: 'type'
		},
		{
			title: '分布类型',
			dataIndex: 'distributionType'
		},
		{
			title: '均值',
			dataIndex: 'meanValue'
		},
		{
			title: '平方差值',
			dataIndex: 'sdValue'
		}
	]

	// 打开抽屉
	const onOpen = (logId) => {
		open.value = true
		if (logId) {
			monteCalculateLogApi.monteCalculateLogDetail({ id: logId }).then((data) => {
				formData.value = data
				let Echarts = echarts.init(basicLineChartRef.value)
				const length = data.simulateResult.length
				const xDataArr = Array.from({ length }, (_, index) => index + 1);

				chartOption.value = {
					tooltip: {}, // 默认提示框配置
					xAxis: {
						data: xDataArr // X 轴数据
					},
					yAxis: {}, // Y 轴默认配置
					series: [
						{
							type: 'line', // 图表类型为柱状图
							data: data.simulateResult  // 数据值
						}
					]
				}

				Echarts.setOption(chartOption.value)
			})
		} else {
			formData.value.simulate = {}
		}
	}

	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		open.value = false
	}

	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
